<template>
	<view>
		<view class="timeslot">
			<scroll-view scroll-y class="left-date">
				<span class="title">日期选择</span>
				<view class="date-list">
					<view class="date-item" :class="{active: item.isActive }" @click="selectDate(index)" v-for="(item,index) in dateList">
						{{item.date}}
					</view>
				</view>
			</scroll-view>	
			<scroll-view scroll-y class="right-time">
				<span class="title">时间选择</span>
				<view class="time-list">
					<view class="time-item" v-if="(appointmentDate.getDate() == currentDate.getDate()&& item.endTime>currentTime) || appointmentDate.getDate() != currentDate.getDate()" :class="{active: item.isActive }" @click="selectTime(index)" v-for="(item,index) in timeList">
						{{item.time}}
					</view>
				</view>
			</scroll-view>	
		</view>
		<view class="action">
			<view class="close-btn" @click="closeTimeSlot">关闭</view>
			<view class="confirm-btn" @click="confirmTimeSlot">确认</view>
		</view>
	</view>
</template>
 
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	name: 'appointment-time'
	export default {
		components: {
			
		},
		data() {
			return {
				appointmentDate:'',
				appointmentDateStr:'',
				appointmentTime:'',
				appointmentTimeStr:'',
				appointmentDateTime:'',
				dateList: [],
				timeList: [],
				currentTime:'',
				currentDate:''
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'applicationConfig'])
		},
		props: {
			
		},
		created() {
			this.inquiryDateSlot();
			this.inquiryTimeSlot();
			this.currentDate = new Date();
			let minutes = this.currentDate.getMinutes();
			let hours = this.currentDate.getHours();
			this.currentTime = (hours<10?'0':'')+hours+':'+ (minutes<10?'0':'')+minutes;
			console.log(this.currentTime);
		},
		methods: {
			selectDate(selectedIndex) {
				let that =  this;
				this.dateList.forEach(function(item,index){
					if(selectedIndex===index){
						item.isActive = true;
						that.appointmentDateStr = item.date;
						that.appointmentDate = item.cDate;
					}
					else
						item.isActive = false;
				})
			},
			selectTime(selectedIndex) {
				let that = this;
				this.timeList.forEach(function(item,index){
					if(selectedIndex===index){
						item.isActive = true;
						that.appointmentTimeStr = item.time;
						that.appointmentTime = item.time;
					}
					else
						item.isActive = false;
				})
			},
			confirmTimeSlot(){
				if(this.appointmentDate && this.appointmentTime){
					this.appointmentDateTime = this.appointmentDateStr +' '+ this.appointmentTimeStr;
					this.$emit('eventSelect',{
						'value':this.appointmentDateTime,
						'appointmentDate':this.appointmentDate,
						'appointmentTime':this.appointmentTime
						});
				}
			},
			closeTimeSlot(){
				this.$emit('eventCancel',{});
			},
			//查询日期(默认14天)
			inquiryDateSlot() {
				let dateList = [];
				var currentDate = new Date();
				for(var i=0;i<14;i++){
					var date = new Date();
					date.setTime(currentDate.getTime()+i*24*60*60*1000);
					var dateStr = (date.getMonth()+1) + '月' + date.getDate() + '日';
					if(currentDate.getDate()==date.getDate())
						dateStr += '(今天)'
					else{
						dateStr += ('('+this.getDayStr(date.getDay())+')');
					}
					//cDate存储日期格式上传给父级
					dateList.push({'date':dateStr,'cDate':date,'isActive':false});
				}
				this.dateList = dateList;
				//默认选中当天
				this.selectDate(0);
			},
			getDayStr(weekDay){
				var dayStr = '';
				if(weekDay==0)
					dayStr = '周日';
				else if(weekDay==1)
					dayStr = '周一';
				else if(weekDay==2)
					dayStr = '周二';
				else if(weekDay==3)
					dayStr = '周三';
				else if(weekDay==4)
					dayStr = '周四';
				else if(weekDay==5)
					dayStr = '周五';
				else if(weekDay==6)
					dayStr = '周六';
				return dayStr;
			},
			//查询时间段
			inquiryTimeSlot() {
				let postData = {
				}
				this.$api.request.inquiryTimeSlot(postData, res => {
					if (res.body.status.statusCode === '0') {
						var slotList = res.body.data.slotList;
						this.formatTimeSlot(slotList);
					} else {
						console.log(res.body.status.errorDesc);
					}
				});
			},
			formatTimeSlot(slotList){
				let timeList = [];
				slotList.forEach(function(slot,index){
					let time = {'time':slot.startTime + ' - ' + slot.endTime,'startTime':slot.startTime,'endTime':slot.endTime,'isActive':false};
					timeList.push(time);
				})
				this.timeList = timeList;
			}
		},
	}
</script>

<style lang='scss'>
	.timeslot{
		height: 500px;
		display: flex;
		background: #fff;
		
		.left-date{
			width: 50%;
			background-color: $page-bg-color;	
				
			.title{
				color: $font-color-dark;
				font-size: $font-lg;
				height: 40px;
				line-height:40px;
				padding-left:20px;
			}
			.date-list{
				.date-item{
					text-align: center;
					height:80px;
					line-height:80px;
				}
				.active{
					background-color: #fff;
				}
			}
			
		}
		.right-time{
			width: 50%;
			.title{
				color: $font-color-dark;
				font-size: $font-lg;
				height: 40px;
				line-height:40px;
				padding-left: 20px;
			}
			.time-list{
				.time-item{
					height:50px;
					line-height:50px;
					border: 1px solid $border-color-base;
					margin: 10px;
					text-align: center;
				}
				.active{
					border: 1px solid $border-color-focus;
				}
			}
		}
	}
	.action{
		background: #fff;
		display:flex;
		text-align: center;
		.close-btn{
			width: 50%;
			padding: 20px;
			background-color: #fff;
			color: $base-color;
		}
		.confirm-btn{
			width: 50%;
			padding: 20px;
			background-color: $base-color;
			color: #fff;
		}
	}
	
</style>
